<template>
  <div id="homeMap"></div>
</template>

<script>
import tonghai from '../common/json/tonghai'
export default {
  data () {
    return {

    }
  },
  methods: {
    getChartMap () {
      // let myChart = this.$echarts.init(document.getElementById("homeMap"));
      // window.addEventListener("resize", () => {
      //   myChart.resize();
      // });
      // this.$echarts.registerMap("tonghai", tonghai);
      let echart = require('echarts');
      echart.registerMap('tonghai', tonghai);
      let optionMap = {
        series: [
          {
            type: "scatter",
            // name: '农资厂',
            coordinateSystem: "geo",
            // hoverAnimation: true,
            // legendHoverLink: true,
            // symbol: "image://" + iconUrl,
            symbol: "pin",
            symbolSize: 20,
            itemStyle: {
              color: "#1DE9B6",
            },
            selectedMode: "single",
            emphasis: {
              scale: true,
            },
            select: {
              // symbol: "image://" + selecticon,
              itemStyle: {
                color: "pink",
              },
            },
            data: [
              // {
              //   name: "河西街道办事处",
              //   value: [102.60955810546875, 24.190605579823398],
              //   prodNum: '120',
              //   prodzhi: '20',
              //   mianji: '32',
              //   xiangmu: '32'
              // },
              // {
              //   name: '九龙街道办事处',
              //   value: [102.65762329101561, 24.098439830932368],
              //   prodNum: '110',
              //   prodzhi: '10',
              //   mianji: '22',
              //   xiangmu: '32'
              // }
              [102.72350370883942, 24.2062682442826],

              [102.60955810546875, 24.190605579823398],
              [102.70843505859375, 24.17431945794909],
              [102.66654968261719, 24.15176601231298],
              [102.65762329101561, 24.098439830932368],
              [102.74688720703125, 24.13547493634954],
              [102.80868530273438, 24.152392550690045],
              [102.75993347167967, 24.07340905546433],
              [102.67410278320311, 24.013852991071445],
            ],
          },
          {
            name: "通海地图",
            type: "map",
            map: "tonghai", //#3
            top: "3%",
            bottom: "10%",
            left: "17%",
            right: "17%",
            label: {
              show: true,
              color: "#FFFFFF",
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "#87BFFF", //区域边框色
              areaColor: "#9B89F3", //区域背景色 },
            },
            emphasis: {
              //选中 （非点击）
              itemStyle: {
                borderWidth: 1,
                borderColor: "#87BFFF", //区域边框色
                areaColor: "#5C71E3", //区域背景色 },
                // label: { show: true }
              },
              label: {
                color: "#0a1b38",
              },
            },
            select: {
              itemStyle: {
                areaColor: "#19d1ff",
              },
              label: {
                color: "#0a1b38",
              },
            },
            data: this.mapData,
          },
        ],
        geo: {
          map: "tonghai",
          show: true,
          // selectedMode: 'single',
          top: "3%",
          bottom: "10%",
          left: "17%",
          right: "17%",
          itemStyle: {
            // normal: {     //未选中
            // borderWidth: 1,
            // borderColor: '#87BFFF',//区域边框色
            // areaColor: '#00A1DD',//区域背景色 },
            // label: { show: true },
            shadowBlur: 20,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            // },
            // emphasis: {    //选中 （非点击）
            //   borderWidth: 1,
            //   borderColor: '#ffffff',//区域边框色
            //   areaColor: '#1DE9B6',//区域背景色 },
            //   label: { show: true }
            // }
          },
        },
      };
      let myEchart = echart.init(document.getElementById('homeMap'));
      myEchart.setOption(optionMap);
      window.addEventListener("resize", () => {
        myEchart.resize();
      });
      // echart.setOption(optionMap);
      let that = this;
      myEchart.on("click", function (params) {
        //逻辑控制
        if (params.componentSubType === "map") {
          that.unit = "千万"
          that.unit1 = "千亩"
          that.yields = params.data.yields;
          that.productionValue = params.data.productionValue;
          that.acreage = params.data.acreage;
          that.majorProject = params.data.majorProject;
        }
      });
    },
  },
  created () {

  },
  mounted () {
    this.getChartMap()
  }
}
</script>

<style scoped>
#homeMap {
  /* height: calc(100% - 24.9%); */
  height: calc(100vh - 30vh);
  width: 100%;
}
</style>
